<template>
  <div>
    <el-container class="videoDetail-container">
      <el-aside class="Recomment-List" :width="!isMobile ? '800px' : '100%'">
        <el-card class="video-content">
          <h1 class="title">"{{ video.info.video_title }}"</h1>
          <div class="video-content">
            <VideoPlayer
              :url="video.info.video_url"
              :imgUrl="video.info.img_url"
            />
          </div>
          <div class="tag-content">
            <span class="tag" v-for="t in tagList" :key="t.id">
              {{ t.tag_name }}
            </span>
          </div>
          <div class="info">
            <div class="intro">{{ video.intro }}</div>

            <div class="view-count">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                width="1em"
                height="1em"
                class="icon"
                focusable="false"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M12 4C5 4 1 10 1 12C1 14 5 20 12 20C19 20 23 14 23 12C23 10 19 4 12 4ZM17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
                  fill="currentColor"
                ></path></svg
              >&nbsp;
              <span>{{ video.info.view_count }}</span>
            </div>
            <div class="like-count">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                class="icon"
                xmlns="http://www.w3.org/2000/svg"
                width="20px"
                height="20px"
                :style="isLiked ? 'color:red' : ''"
                @click="toggleLike"
                focusable="false"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M8.05882 9.38973L11.7724 2.42678C11.8993 2.18883 12.1914 2.09699 12.4121 2.25201C12.9945 2.66123 13.8333 3.45218 13.8333 4.37503C13.8333 4.87411 13.7011 5.7719 13.5626 6.71262C13.4101 7.74781 13.25 8.83498 13.25 9.50003H20.8333C21.2778 9.50003 22 9.95175 22 11C22 11.904 21.0084 16.0872 20.3079 19.0423C20.1961 19.5138 20.0917 19.9541 20 20.3449C20 20.5632 19.7333 21 18.6667 21H8.49796C8.22182 21 8 20.7762 8 20.5V9.62503C8 9.54296 8.0202 9.46215 8.05882 9.38973ZM3.5 9.50003C3.22386 9.50003 3 9.72389 3 10V20.5C3 20.7762 3.22386 21 3.5 21H5.5C5.77614 21 6 20.7762 6 20.5V10C6 9.72389 5.77614 9.50003 5.5 9.50003H3.5Z"
                  fill="currentColor"
                ></path></svg
              >&nbsp;
              <span> {{ video.info.like_count }}</span>
            </div>
            <div class="comment-count">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                width="1em"
                height="1em"
                class="icon"
                focusable="false"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M23 11.5C23 5.70101 18.299 1 12.5 1C6.70101 1 2 5.70101 2 11.5C2 13.4179 2.51422 15.2157 3.4123 16.7631L2.08689 20.7393C1.83512 21.4946 2.52398 22.2269 3.29323 22.0218L7.70712 20.8448C9.14399 21.5832 10.7733 22 12.5 22C18.299 22 23 17.299 23 11.5ZM7.5 13C6.67157 13 6 12.3284 6 11.5C6 10.6716 6.67157 10 7.5 10C8.32843 10 9 10.6716 9 11.5C9 12.3284 8.32843 13 7.5 13ZM14 11.5C14 12.3284 13.3284 13 12.5 13C11.6716 13 11 12.3284 11 11.5C11 10.6716 11.6716 10 12.5 10C13.3284 10 14 10.6716 14 11.5ZM17.5 13C16.6716 13 16 12.3284 16 11.5C16 10.6716 16.6716 10 17.5 10C18.3284 10 19 10.6716 19 11.5C19 12.3284 18.3284 13 17.5 13Z"
                  fill="currentColor"
                ></path></svg
              >&nbsp;
              <span> {{ video.info.comment_count }}</span>
            </div>
            <div class="share-count">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                width="1em"
                height="1em"
                @click="shareVideo"
                focusable="false"
                class="icon"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M14.4393 2.43934C13.8536 3.02513 13.8536 3.97487 14.4393 4.56066L16.8787 7H9.25C5.1647 7 2 10.5796 2 14.5C2 18.4204 5.1647 22 9.25 22H12.5C13.3284 22 14 21.3284 14 20.5C14 19.6716 13.3284 19 12.5 19H9.25C6.98402 19 5 16.9308 5 14.5C5 12.0692 6.98402 10 9.25 10H16.8787L14.4393 12.4393C13.8536 13.0251 13.8536 13.9749 14.4393 14.5607C15.0251 15.1464 15.9749 15.1464 16.5607 14.5607L21.5607 9.56066C22.1464 8.97487 22.1464 8.02513 21.5607 7.43934L16.5607 2.43934C15.9749 1.85355 15.0251 1.85355 14.4393 2.43934Z"
                  fill="currentColor"
                ></path></svg
              >&nbsp;
              <span> {{ video.info.share_count }}</span>
            </div>
          </div>
        </el-card>
        <el-card class="comment-list" ref="commentList">
          <div class="publish-content">
            <el-input
              show-word-limit
              maxlength="1000"
              @keyup.enter.native="publishComment"
              v-model="comment_content"
              placeholder="请发表你的评论"
            >
              <el-link
                slot="suffix"
                :underline="false"
                @click="publishComment"
                style="font-size:16px"
                class="el-input__icon el-icon-s-promotion"
              ></el-link>
            </el-input>
          </div>
          <div class="comments">
            <!-- <h1>用户评论</h1>
            <el-divider></el-divider> -->
            <div
              class="comment-card"
              v-for="comment in commentList"
              :key="comment.id"
            >
              <CommentCard :comment="comment" />
            </div>
            <div v-show="!commentList.length">
              <el-empty description="暂无评论"></el-empty>
            </div>
          </div>
        </el-card>
      </el-aside>
      <el-main
        v-if="!isMobile && tagList.length"
        style="padding:0 0px 10px 20px"
      >
        <el-card>
          <div class="tag-content">
            <el-link
              :underline="false"
              class="tag"
              v-for="t in tagList"
              :key="t.id"
              type="info"
              @click="getRecommentVideoList(t)"
            >
              {{ t.tag_name }}
            </el-link>
          </div>
          <RecommentVideoList :videoList="recommentVideoList" :count="count" />
        </el-card>
      </el-main>
    </el-container>
    <div v-if="isMobile && tagList.length" style="margin-bottom: 0.5rem;">
      <el-card class="recomment-container">
        <div class="tag-content">
          <el-link
            :underline="false"
            class="tag"
            v-for="t in tagList"
            :key="t.id"
            type="info"
            @click="getRecommentVideoList(t)"
          >
            {{ t.tag_name }}
          </el-link>
        </div>
        <RecommentVideoList :videoList="recommentVideoList" :count="count" />
      </el-card>
    </div>
  </div>
</template>

<script>
import VideoPlayer from '@/components/Video/VideoPlayer'
import RecommentVideoList from '@/components/Video/RecommentVideoList'
import CommentCard from '@/components/Comment/CommentCard'
import { copyToClipboard } from '@/utils/tools'
export default {
  props: {},
  components: {
    VideoPlayer,
    CommentCard,
    RecommentVideoList
  },
  data() {
    return {
      video: {},
      isLiked: false,
      limit: 10,
      page: 1,
      comment_content: '',
      commentList: [], // 评论列表
      count: 0,
      tagList: [], // 标签列表
      // 推荐分页数据
      RecommentLimit: 10,
      RecommentPage: 1,
      recommentVideoList: [],
      count: 0
    }
  },
  computed: {
    isMobile() {
      return this.$data.isMobile
    }
  },
  watch: {
    '$route.params.id': {
      handler(val) {
        window.location.reload()

        // 或者使用路由跳转到当前页面
        this.$router.replace(this.$router.currentRoute)
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      // 如果是本次第一次进入页面
      this.getVideoDetail()
      // 获取推荐列表视频
    })
  },
  methods: {
    // 根据标签获取视频
    async getRecommentVideoList(tag) {
      const { RecommentLimit, RecommentPage } = this
      const res = await this.$API.video.getVideoByTagId(
        tag.id,
        RecommentLimit,
        RecommentPage
      )
      if (res && !res.data) {
        if (RecommentPage <= 1) {
          this.RecommentVideo = []
        } else {
          this.RecommentPage--
          // 重新获取
          this.getRecommentVideoList()
        }
      }
      if (res.status == 200) {
        this.recommentVideoList = res.data.payload
        this.count = res.data.count
      }
    },
    // 获取视频
    async getVideoDetail() {
      const id = this.$route.params.id
      if (!id) return this.$message.error('视频不存在')
      const res = await this.$API.video.readVideo(id)
      if (res.status == 200) {
        this.video = res.data
        // 获取点赞状态
        this.getVideoThumbStatus()
        this.getVideoCommentList()
        // 获取标签列表
        this.getVideoTags()
      }
    },
    // 刷新视频
    async RefreshVideo() {
      const res = await this.$API.video.refreshVideo(this.video.info.id)
      if (res.status == 200) {
        this.video = res.data
      }
    },
    // 点赞按钮
    async toggleLike() {
      let datas = this.$qs.stringify({ video_id: this.video.info.id })
      const res = await this.$API.video.VideoThumb(datas)
      if (res.status == 200) {
        this.isLiked = !this.isLiked
        this.$message.success(this.isLiked ? '点赞成功' : '取消点赞成功')
        // 重新获得文章数据
        this.RefreshVideo()
      }
    },
    // 获取用户点赞状态
    async getVideoThumbStatus() {
      const res = await this.$API.video.getVideoThumbStatus(this.video.info.id)
      if (res.status == 200) {
        this.isLiked = res.data ? true : false
      } else {
        this.isLiked = false
      }
    },
    // 获取评论列表
    async getVideoCommentList() {
      this.page = 1
      const { video, page, limit } = this
      try {
      } catch (error) {}
      const res = await this.$API.video.getVideoCommentList(
        video.info.id,
        limit,
        page
      )
      console.log('commentList', res)
      if (res.status == 200) {
        this.commentList = res.data.payload
        this.count = res.data.count
      } else {
        // this.$message(res.msg)
      }
    },
    // 发布评论
    async publishComment() {
      let { video, comment_content } = this
      let datas = this.$qs.stringify({
        video_id: video.info.id,
        comment_content
      })
      const res = await this.$API.video.addComment(datas)
      if (res.status == 200) {
        this.$message.success('发送评论成功')
        // 刷新评论列表
        this.comment_content = ''
        this.getVideoCommentList()
      }
    },
    // 分享链接
    shareVideo() {
      const currentUrl = window.location.href
      copyToClipboard(currentUrl) // 调用复制链接到剪贴板的方法
      alert('当前页面链接已复制到剪贴板')
    },
    // 获取视频标签
    async getVideoTags() {
      const res = await this.$API.video.getTags(this.video.info.id)
      if (res.status == 200) {
        this.tagList = res.data
        this.getRecommentVideoList(this.tagList[0])
      }
    },
    // 下滑到评论
    ToComment() {
      const element = this.$refs.commentList
      console.log(element)
      if (element) {
        const options = {
          behavior: 'smooth',
          block: 'start',
          inline: 'nearest'
        }
        element.scrollIntoView(options)
      }
    }
  }
}
</script>

<style scoped>
.Resource-List {
  padding: 0px;
}
.Resource-List .title {
  display: flex;
  margin-bottom: 20px;
}
.Resource-List .intro {
  font-size: 14px;
  color: #9e99a0;
}
.Recomment-List {
  padding: 0px;
  overflow-y: hidden;
  overflow-x: hidden;
}
.video-content {
  /* width: 100%;min-height: 400px; */
}
.video-content >>> .el-card__body {
  padding: 0;
}
.video-content .title {
  font-size: 28px;
  margin: 25px 20px;
}
.video-content .intro {
  width: 100%;
  margin-bottom: 20px;
  color: #d14354;
}
.video-content .info {
  margin-top: 20px;

  width: 100%;
  font-size: 16px;
  display: flex;
  padding: 0px 20px 20px 20px;
  flex-wrap: wrap;
}
.video-content .tag-content {
  display: flex;
  margin-top: 20px;
  margin-left: 20px;
}
.tag {
  color: #a27a94;
  font-size: 14px;
  background-color: #f1f2f3;
  display: inline-block;
  border-radius: 3px;
  padding: 3px 12px;
  text-align: center;
  border-radius: 100px;
  margin-right: 12px;
  /* transition: all 0.2s; */
}
.view-count {
  margin-right: 20px;
  /* width: 1rem; */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.like-count {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 20px;
}

.comment-count {
  margin-right: 20px;
  /* width: 1rem; */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.icon {
  font-size: 16px;
  color: #747679;
  cursor: pointer;
}
.icon:hover {
  color: #909399;
}
.comment-list {
  margin: 20px 0;
}
.publish-content {
  display: flex;
}
.comments {
  width: 100%;
  margin: 30px 0;
}
.comments h1 {
  font-size: 20px;
}
.comment-card {
  margin: 10px 0;
}
.video-icon {
  font-size: 36px;
}
.share-count {
  margin-right: 20px;
  width: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.liked {
  color: red;
}
.tag-container {
  width: 100%;
  background-color: #f1f2f3;
  color: #1c1f23;
}
/* 移动端样式 */
@media screen and (max-width: 767px) {
  .like-count,
  .share-count,
  .comment-count,
  .view-count {
    margin-right: 25px;
  }
  .recomment-container {
    width: 100%;
  }
  .recomment-container .el-footer {
    padding: 0px 0px 1rem 0;
  }
  .videoDetail-container {
    width: 100%;
    height: auto;
    margin-top: 0.5rem;

    align-items: stretch;
  }
  /* 其他移动端样式设置 */
}
</style>
